body,
html {
    background-color: #1d1f20;
    color: #ffffff;
}
.moon {
    position: absolute;
    top: 0;
    right: 0;
}
.container {
    height: 300px;
    width: 300px;
    margin: 50px;
}
.person {
    position: absolute;
    height: 75px;
    width: 0;
    color: #fff;
    left: 150px;
    top: 159px;
    transform-origin: 50% 50% 0px;
    animation: sprint 4s infinite ease-in;
}

.person .head:before {
    content: "";
    position: absolute;
    top: 0;
    left: -6px;
    height: 2.7px;
    width: 42px;
    border-radius: 20%;
    border: 4px solid white;
    background-color: #fff;
    transform-origin: 50% 100% 0px;
    z-index: 90;
}

.person .head {
    position: absolute;
    top: -30px;
    left: -6px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border: 4px solid white;
    transform-origin: 50% 100% 0px;
    z-index: 90;
    animation: bob 2s infinite alternate;
}
.person .head:after{
    content: "";
    position: absolute;
    top: -12px;
    left: 9px;
    height: 12px;
    width: 15px;
    border-radius: 30%;
    border: 4px solid white;
    background-color: #fff;
    z-index: 90;
}
.person .torso{
    position: absolute;
    height: 60px;
    width: 0;
    border-left: 2px solid white;
    /* left: 0px; */
    top: 15px;
    z-index: 90;
}
.person .part{
    position: absolute;
    left: 0;
    top: 75px;
    z-index: 90;
}
.person .part.arm{
    position: absolute;
    border-left: 3px solid white;
    border-bottom: 3px solid white;
    height: 45px;
    width: 39px;
    top: 15px;
    right: 300px;
    animation: pump 1s infinite ease-in;
    transform-origin: 0% 0% 0px;
}
.person .part.arm.one{
    transform: rotate3d(0,0,1,-90deg);
}
.person .part.arm.two{
    transform: rotate3d(0,0,1,-90deg);
    animation-delay: .5s;
}
.person .part.leg{
    height: 57px;
    width: 60px;
    border-right: 3px solid white;
    border-top: 3px solid white;
    animation: run 1s infinite ease-in;
    transform-origin: 0% 0% 0px;
}
.person .part.leg.one{
    transform: rotate3d(0,0,1,-90deg);
}
.person .part.leg.two{
    transform: rotate3d(0,0,1,-90deg);
    animation-delay: .5s;
}
.person .part .foot{
    position: absolute;
    top: 90px;
    left: 0;
    width: 3px;
    height: 3px;
    background-color: #ffffff;
    z-index: 900;
    border: 3px solid red;
}
@keyframes run{
    0%{
        transform: rotate3d(0,0,1,-5deg);
    }
    50%{
        transform: rotate3d(0,0,1,150deg);
    }
    100%{
        transform: rotate3d(0,0,1,-5deg);
    }
}
@keyframes bob{
    0%{
        transform: rotate3d(0,0,1,5deg);
    }
    25%{
        transform: rotate3d(0,0,1,-30deg) skew(15deg,0deg);
    }
    50%{
        transform: rotate3d(0,0,1,5deg);
    }
    75%{
        transform: rotate3d(0,0,1,-30deg) skew(15deg,0deg);
    }
    100%{
        transform: rotate3d(0,0,1,20deg) skew(-15deg,0deg);
    }
}
@keyframes pump{
    0%{
        transform: rotate3d(0,0,1, 80deg);
    }
    50%{
        transform: rotate3d(0,0,1, -70deg);
    }
    100%{
        transform: rotate3d(0,0,1, 80deg);
    }
}
@keyframes sprint{
    0%{
        transform-origin: 50% 50% 0px;
        transform: translate(-300px,0px);
    }
    100%{
        transform-origin: 50% 50% 0px;
        transform: translate(1300px,0px);
    }
}